<template>
	<view class="page">
		<view class="card">
			<view class="label">输入车架号</view>
			<view class="input-row">
				<input class="input" type="text" placeholder="请输入" v-model="vin" />
				<button class="btn" @click="search">查询</button>
			</view>
		</view>

		<!-- 查询后显示结果 -->
		<view v-if="showResult" class="result">
			<view class="section-title">车型选择</view>

			<!-- 已检测车辆 -->
			<view class="car-card" v-if="car_index >= 0">
				<image class="car-img" :src="data_info.logo" mode="aspectFill"></image>
				<view class="car-info">
					<view class="tag">已选择</view>
					<view class="car-text">
						<view>{{data_info.brand}}、{{data_info.carlist[car_index].name}}</view>
						<view class="sub">{{data_info.carlist[car_index].price}}</view>
					</view>
				</view>
			</view>

		

			<!-- 未检测车辆列表 -->
			<view v-for="(item,index) in data_info.carlist" :key="index" class="car-card" @tap="change_car(index)">
				<image class="car-img" :src="data_info.logo" mode="aspectFill"></image>
				<view class="car-info">
					<view class="car-text">
						<view>{{data_info.brand}}、{{item.name}}</view>
						<view class="sub">原厂指导价:{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 下一步按钮 -->
		<view v-if="showResult && car_index >= 0" class="next-btn-box">
			<button class="next-btn" @click="nextStep">下一步</button>
		</view>
	</view>
</template>

<script>
	import common_config from '../../static/js/common.js';
	var config = common_config.config;
	var that;
	var userInfo;
export default {
	data() {
		return {
			if_login:false,
			vin: '',
			showResult: false,
			data_info:{},
			car_index:-1,
			act:''
			
		}
	},
	onLoad(options) {
		that = this;
		//that.load_navs();
	  //this.fetchMenus();
	   that.act = options.act;
		that.plusReady();
	  
	},
	methods: {
		//初始化
		plusReady(){
			var func1 = function(){
				that.no_login();
			}
			var func2 = function(){
				that.is_login();
			}
			common_config.common_if_login(func1,func2);
		},
		//未登录
		no_login(){
			that.if_login = false;
		},
		//已登录
		is_login(){
			that.if_login = true;
			userInfo = uni.getStorageSync('userInfo');
			userInfo = JSON.parse(userInfo);
		},
		change_car(index){
			that.car_index = index;
		},
		search() {
			if (!this.vin.trim()) return uni.showToast({ title: '请输入车架号', icon: 'none' });
			console.log(userInfo);
			uni.request({
				url: config.request_url+'/index/pinggu/step1?token='+userInfo.token,
				data: {
					vin:this.vin,
					act:this.act
				},
				method: 'POST',
				header: {
				     "Content-Type": "application/x-www-form-urlencoded"
				},
				success: (res) => {
						uni.hideLoading();
					res = res.data;
					if(res.code != 200){
						common_config.calert(res.msg);
					}else{
						if(res.data.act == 'caigou'){
							uni.navigateTo({
								url:'/pages/index/caigou?vin='+res.data.vin+'&car_index='+res.data.car_index+'&price_id='+res.data.id
							});
							return false;
						}
						that.data_info = res.data;
						this.showResult = true;
					}
				}
			});
			//this.showResult = true;
		},
		//表单输入事件
		onKeyEvent:function(event,the_id){
			that[the_id] = event.target.value;
		},
		nextStep() {
			if(!that.vin){
				return false;
			}
			uni.navigateTo({
				url:'/pages/index/pinggu1?vin='+that.vin+'&car_index='+that.car_index
			})
		}
	}
}
</script>

<style>
.page {background:#f9f9ff;min-height:100vh;padding:40rpx 40rpx 140rpx;}
.card {background:#fff;border-radius:20rpx;box-shadow:0 4rpx 12rpx rgba(0,0,0,0.05);padding:40rpx 30rpx;margin-bottom:40rpx;}
.label {font-size:28rpx;color:#666;margin-bottom:20rpx;}
.input-row {display:flex;align-items:center;gap:20rpx;}
.input {flex:1;border:1rpx solid #e5e5e5;border-radius:10rpx;padding:18rpx 24rpx;font-size:28rpx;color:#333;background:#fafafa;}
.btn {background:#007aff;color:#fff;font-size:28rpx;border-radius:10rpx;padding:0 40rpx;height:70rpx;line-height:70rpx;}
.btn:active {opacity:.8;}
.result {padding:0 10rpx;}
.section-title {font-size:32rpx;font-weight:600;margin-bottom:20rpx;}
.sub-title {font-size:30rpx;color:#555;margin:40rpx 0 20rpx 0;}
.car-card {background:#fff;border-radius:16rpx;display:flex;align-items:center;gap:20rpx;padding:20rpx;margin-bottom:20rpx;border:1rpx solid #eee;box-shadow:0 2rpx 8rpx rgba(0,0,0,0.03);}
.car-img {width:200rpx;height:120rpx;border-radius:12rpx;flex-shrink:0;}
.car-info {flex:1;display:flex;align-items:center;justify-content:space-between;}
.car-text {flex:1;font-size:28rpx;color:#333;line-height:1.6;}
.car-text .sub {font-size:24rpx;color:#888;}
.tag {background:#ffb54c;color:#fff;font-size:24rpx;border-radius:6rpx;padding:4rpx 12rpx;margin-right:10rpx;white-space:nowrap;}
.next-btn-box {position:fixed;bottom:0;left:0;right:0;background:#fff;padding:20rpx 40rpx;box-shadow:0 -4rpx 10rpx rgba(0,0,0,0.05);}
.next-btn {width:100%;height:90rpx;line-height:90rpx;background:#007aff;color:#fff;font-size:30rpx;border-radius:45rpx;font-weight:500;}
.next-btn:active {opacity:.9;}
</style>
